<template>
    <div id="share_group_view">
      <header class="mui-bar mui-bar-nav ">
        <a class="  mui-icon arr_left mui-pull-left" @tap="open_share_group_view(false)"></a>
        <h1 class="mui-title">我的拼团</h1>
      </header>
      <div class='mui-content content'>
        <div class="hr_20"></div>
        <div class='img'>
          <img :src='order.pic'>
          <div class='txt'>
            <span style="font-size: 0.6rem;    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;">{{order.name}}</span>
          </div>
        </div>
        <div class='con'>
          <div class='p'>还差
            <span>{{num}}</span>人</div>
          <div class='portrait'>
            <div class="join_user_img" style="margin-right: 0.2rem" v-for="(i,k) in order.head">
              <img :src='i.head' v-show="i">
            </div>

          </div>
          <div class='time'>
            <span>{{time}} 后结束</span>
          </div>
          <button class='buttom' @tap="to_share_fun('share')" >{{btn_text}}</button>
          <div class='rule'>*规则说明</div>
        </div>
      </div>
    </div>
</template>

<script>
  import goods_ajax from "../../ajax/goods_ajax";
  import util from "../../tools/util";
  import h5_plus from "../../tools/h5_plus";
  import share_msg from "../../tools/share_msg_config"
  export default {
        name: "share_groupvue",
      data(){
        return{
          order:{},
          time:0,
          sec:0,
          type:'',
          btn_text:''
        }
      },
      created(){
         let order_info = this.$store.state.goods.share_group_goods_info;
         console.log(order_info)
          this.order = order_info;
          let share_group_ids = this.$store.state.goods.share_group_ids;
         console.log(share_group_ids)
          this.sec =  parseInt(order_info.spellouttime);
         this.type = this.$store.state.goods.share_group_type;
        if(this.type=='share'){
          this.btn_text = "点击邀请好友拼单"
        }else if(this.type=='join'){
          this.btn_text = "参与拼团"
        }
      },
      methods:{
        open_share_group_view(tf){
          this.$store.commit("open_share_group_view",tf)
        },
        to_share_fun(){
          var that = this;
          if(this.type=='share'){
            console.log("share");
            mui.plusReady(function () {

              h5_plus.get_share(function(share_list) {

                console.log(JSON.stringify(share_list))

                let msg = share_msg;
                let orderid =  that.$store.state.goods.share_group_ids.orderid;
                let sid = that.$store.state.goods.share_group_ids.sid;
                console.log("orderid-->" + orderid);
                console.log("sid-->" + sid);

                msg.href = msg.href + "?type=share_group&id="+orderid +"&sid="+sid

                msg.title = that.order.name; //分享标题
                msg.content = "还差"+that.num +"人拼团成功!"   ;    //分享描述
                msg.thumbs = that.order.pic;
                console.log("分享信息-->> " + JSON.stringify(msg));

                msg.extra.scene = 'WXSceneSession';
                h5_plus.shareAction(share_list.weixin, msg);

              })
            })

          }else if(this.type=='join'){
            console.log("join");
            let goodsid = this.order.goods_id;
            let sid = this.$store.state.goods.share_group_ids.sid;
            this.open_share_group_view(false)
            this.$router.push("/shop/goods_list/goods?goodsid="+goodsid+"&sid="+sid)
          }

        }
      },
      computed:{
        num: function() {
          return parseInt(this.order.count) - parseInt(this.order.headlength)
        }
      },
      mounted(){
          setInterval(()=>{
            this.time = util.formatSeconds(--this.sec)
          },1000)
      }

    }
</script>




<style scoped>
#share_group_view{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1c83fc;
  z-index: 10001;
}

body {
  background: #1c83fc;
}
.content {
  width: 14.72rem;
  margin: 0 auto;
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
}
.img {
  width: 100%;
  height: 14.72rem;
  position: relative;
}
.img img {
  width: 14.72rem;
  height: 14.72rem;
}
.img .txt {
  height: 1.024rem;
  line-height: 1.024rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(53, 53, 53, 0.25);
}
.img .txt text {
  font-size: 0.5547rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  display: block;
}
.con .p {
  font-size: 0.768rem;
  color: #353535;
  text-align: center;
  padding: 0.7467rem 0 0.4267rem 0;
}
.con .p text {
  color: #ff0000;
}
.con .portrait {
  width: 13.44rem;
  margin: 0 auto;
  padding: 0 0.2987rem;
}
.con .portrait img {
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  overflow: hidden;
}
.hr_20 {
  height: 0.64rem;
  background-color: #1c83fc;
}
.con .portrait .join_user_img {
  display: inline-block;
  width: 1.28rem;
  height: 1.28rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #d2d2d2;
  overflow: hidden;
}
.con .portrait .join_user_img img {
  width: 100%;
}
.con .time {
  font-size: 0.5973rem;
  color: #353535;
  text-align: center;
  padding: 0.32rem 0;
}
.con .buttom {
  width: 13.44rem;
  height: 2.0053rem;
  margin-left: 0.64rem;
  color: #fff;
  font-size: 0.7253rem;
  line-height: 2.0053rem;
  text-align: center;
  border: 0;
  padding: 0;
  background: linear-gradient(to right, #1cb3fc, #1c86fc);
  margin-bottom: 1.28rem;
}
.con .rule {
  color: #031791;
  font-size: 0.512rem;
  text-align: center;
  margin-bottom: 0.4267rem;
}

</style>
